<template>
    <div ref='echartsRef' class="graphics"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DataZoomComponent,
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

const echartsRef = ref(null);

echarts.use([
    DataZoomComponent,
    LegendComponent,
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);

onMounted(() => {
    var myChart = echarts.init(echartsRef.value);
    var option;

    const names = [
        'Orange',
        'Tomato',
        'Apple',
        'Sakana',
        'Banana',
        'Iwashi',
        'Snappy Fish',
        'Lemon',
        'Pasta'
    ];
    const years = ['2001', '2002', '2003', '2004', '2005', '2006'];
    const shuffle = (array) => {
        let currentIndex = array.length;
        let randomIndex = 0;
        while (currentIndex > 0) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex--;
            [array[currentIndex], array[randomIndex]] = [
                array[randomIndex],
                array[currentIndex]
            ];
        }
        return array;
    };
    const generateRankingData = () => {
        const map = new Map();
        const defaultRanking = Array.from({ length: names.length }, (_, i) => i + 1);
        for (const _ of years) {
            const shuffleArray = shuffle(defaultRanking);
            names.forEach((name, i) => {
                map.set(name, (map.get(name) || []).concat(shuffleArray[i]));
            });
        }
        return map;
    };
    const generateSeriesList = () => {
        const seriesList = [];
        const rankingMap = generateRankingData();
        rankingMap.forEach((data, name) => {
            const series = {
                name,
                symbolSize: 10,
                type: 'line',
                smooth: true,
                emphasis: {
                    focus: 'series'
                },
                endLabel: {
                    show: true,
                    formatter: '{a}',
                    distance: 10
                },
                lineStyle: {
                    width: 4
                },
                data
            };
            seriesList.push(series);
        });
        return seriesList;
    };
    option = {
        title: {
            text: '测试图形'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                // data: [12345, 789451, 4567891, 152347, 123456, 789456, 1234567]
            }
        ],
        yAxis: [
            {
                type: 'value',
            }
        ],
        // series: [
        //     {
        //         name: 'Email',
        //         type: 'line',
        //         // stack: 'Total',
        //         areaStyle: {},
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [120, 132, 101, 134, 90, 230, 210]
        //     },
        //     {
        //         name: 'Union Ads',
        //         type: 'line',
        //         stack: 'Total',/* 将线条区域分隔开, 下一个叠在上一个的位置 */
        //         areaStyle: {},/* 填充线条以下区域颜色 */
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         smooth: true,/* 平滑 */
        //         lineStyle: {
        //             width: 4
        //         },
        //         data: [220, 182, 191, 234, 290, 330, 310]
        //     },
        //     {
        //         name: 'Video Ads',
        //         type: 'line',
        //         // stack: 'Total',
        //         areaStyle: {},
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [150, 232, 201, 154, 190, 330, 410]
        //     },
        //     {
        //         name: 'Direct',
        //         type: 'line',
        //         // stack: 'Total',
        //         areaStyle: {},
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [320, 332, 301, 334, 390, 330, 320]
        //     },
        //     {
        //         name: 'Search Engine',
        //         type: 'line',
        //         smooth: true,
        //         // stack: 'Total',
        //         // label: {
        //         //     show: true,
        //         //     position: 'top'
        //         // },
        //         areaStyle: {},
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [820, 932, 901, 934, 1290, 1330, 1320]
        //     }
        // ],
        series: generateSeriesList(),
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'none'
            },
            // {
            //     type: 'slider',
            //     yAxisIndex: 0,
            //     filterMode: 'none'
            // },
            {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'none'
            },
            // {
            //     type: 'inside',
            //     yAxisIndex: 0,
            //     filterMode: 'none'
            // }
        ],
    };

    option && myChart.setOption(option);
})
</script>

<style scoped>
.graphics {
    width: 100%;
    height: 100%;
}
</style>